<template>
  <div class="orderDetail">

    <van-sticky>
        <van-nav-bar style="background-color:#409eff"  left-arrow left-text=""  @click-left="goback" >
            <template #title>
              <div style="color:white">
                订单详情
              </div>
            </template>
            <template #left>
              <div style="color:white">
                 <van-icon name="arrow-left" color="white"/>
                  返回
              </div>
            </template>
        </van-nav-bar>
      </van-sticky>


    <div class="status">
      <span>
        <van-icon name="orders-o" />订单进度</span>
      <van-steps style="margin-top:10px" :active="active" active-icon="success" active-color="#38f">
        <van-step>待支付</van-step>
        <van-step>待派送</van-step>
        <van-step>已完成</van-step>
      </van-steps>
    </div>


    <van-cell-group>
      <van-cell>
        <template #title>
          <div>
            <van-icon name="coupon-o" /> <span style="font-size:14px">菜品详情</span>
          </div>
        </template>
        <template #label>
          <div style="box">
            <van-card v-for="item in $route.query.item.orderLines" :key="item.id" :num="item.num"
              :price="item.price*item.num + '.00'" :desc="item.product.description" :title="item.product.name"
              :thumb="item.product.photo">

            </van-card>
          </div>
        </template>
      </van-cell>
    </van-cell-group>

    <p class="count">
      总计:<span style="color: red">¥{{ $route.query.item.total }}</span>
    </p>
    <van-cell-group>
      <van-cell title="顾客信息">
        <template #label>
          <div>
            <p>
              配送地址：{{$route.query.item.address.province+''+$route.query.item.address.city+''+$route.query.item.address.area+''+$route.query.item.address.address}}
            </p>
            <p>联系方式：{{$route.query.item.customer.username}} ({{$route.query.item.customer.telephone}})</p>
            <p>下单时间：{{new Date(parseInt($route.query.item.orderTime)).toLocaleString().replace(/:\d{1,2}$/,' ')}}</p>
            <p>买家留言：{{$route.query.item.buyerMessage}}</p>
          </div>
        </template>
      </van-cell>
    </van-cell-group>

    <van-button class="payButton" v-if="$route.query.item.status == '待支付'" type="primary" @click="orderPay">支付</van-button>

    <!-- 充值 -->
    <van-action-sheet v-model="balanceShow" title="充值" @close="toClose">
      <van-form validate-first @submit="topUp">
        <!-- 通过 validator 进行函数校验 -->
        <van-field v-model="balance" name="validator" label="充值金额" placeholder="请输入充值金额"
          :rules="[{ validator, message: '单次充值金额不超过1000元' }]" />
        <van-button color="#409eff" round block type="info" native-type="submit">提交</van-button>
      </van-form>
    </van-action-sheet>

   
  <div class="footer"><van-divider style="margin-top:50px">没有更多了</van-divider></div>
   
    
  </div>

</template>

<script>
  import {
    mapState
  } from 'vuex'
  import {get} from '@/http/axios'
  export default {
    data() {
      return {
        item: {},
        // 充值框弹出
        balanceShow: false,
        // 充值金额
        balance: '',
      }
    },
    methods: {
      async orderPay() {
        let response = await get('/app/order/pay?id=' + this.$route.query.item.id)
        if (response.data.message == '余额不足!') {
          Dialog.confirm({
              confirmButtonColor: '#7879FF',
              message: "当前余额不足，是否充值？",
            })
            .then(() => {
              // on confirm
              // 弹出充值框
              this.balanceShow = true
            })
            .catch(() => {
              // on cancel
            });
        } else if (response.data.message == '支付成功') {
          this.$toast.success('支付成功');
          // 路由跳转至订单页面
          this.$router.push({
              path: '/manager/order'
            })
            .then((res) => {
              // 获取订单数据
            })
        } else {
            this.$toast.fail('支付失败');
        }
      },
      validator(val) {
        if (val < 0 || val > 1000) {
          return false
        } else {
          return true
        }
      },
      // 充值
      topUp() {
        console.log(this.balance, this.userInfo.id);
        let data = {
          customerId: this.userInfo.id,
          money: this.balance
        }
        this.getRecharge(data).then(r => {
          console.log(r);
          if (r.data.status == 200) {
            this.$toast.success('充值成功');
            this.balanceShow = false
          } else {
             this.$toast.success('充值失败');
          }
        })
        // 实现充值逻辑
      },
      // 取消弹框
      toClose() {
        // 余额置空
        this.balance = ''
      },
      goback() {
        this.$router.go(-1);
      },
    },
    computed: {
      // 获取用户信息
      ...mapState('user', ['userInfo']),
      active: function () {
        if (this.item.status == '已完成')
          return 0
        else if (this.item.status == '待派送')
          return 1
        else if (this.item.status == '已完成')
          return 2
      }
    },
    created() {
      this.item = this.$route.query.item

    },
  }
</script>

<style scoped>
  .van-card {
    width: 330px;
    margin-left: 20px;
    margin-top: 10px;
  }

  .status {
    margin-top: 10px;
    font-size: 14px;
  }

  .status span {
    margin-left: 10px;
  }

  .van-cell-group {
    margin-top: 5px;
  }

  .count {
    text-align: right;
    padding-right: 11px;
    color: #333;
    font-size: 12px;
  }
  .payButton{
    width: 25%;
    height:80%;
    margin-left: 280px;
    background-color:#409eff;
  }
  .footer{
    height: 200px;
    box-sizing: border-box;
  }
</style>